<template>
	<div class="badge">
		<slot></slot>
		<sup
			v-show="!hidden && (content || content === 0 || isDot)"
			v-text="content"
			class="badge__content"
			:class="[
				'badge__content--' + type,
				{
					'is-fixed': $slots.default,
					'is-dot': isDot,
					'is-bounce': bounce
				}
			]"
		>
		</sup>
	</div>
</template>

<script>
export default {
	name: "Badge",
	props: {
		value: [String, Number],
		max: Number,
		isDot: Boolean,
		hidden: Boolean,
		bounce: Boolean,
		type: {
			type: String,
			validator(val) {
				return (
					["primary", "success", "warning", "info", "danger", "lineargradient"].indexOf(
						val
					) > -1
				);
			}
		}
	},
	computed: {
		content() {
			if (this.isDot) return;
			const value = this.value;
			const max = this.max;
			if (typeof value === "number" && typeof max === "number") {
				return max < value ? `${max}+` : value;
			}
			return value;
		}
	}
};
</script>
<style lang="scss">
.badge {
	position: relative;
	vertical-align: middle;
	display: inline-block;
}
.badge__content {
	background-color: #f56c6c;
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	height: 18px;
	line-height: 18px;
	padding: 0 6px;
	text-align: center;
	white-space: nowrap;
	/* border: 1px solid #fff; */
}
.badge__content.is-fixed {
	position: absolute;
	top: 0;
	right: 15px;
	transform: translateY(-50%) translateX(100%);
}
.badge__content.is-fixed.is-dot {
	right: 5px;
}
.badge__content.is-dot {
	height: 8px;
	width: 8px;
	padding: 0;
	right: 0;
	border-radius: 50%;
}
.badge__content.is-bounce {
	animation: bounce 300ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
@keyframes bounce {
	0% {
		transform: translateY(-50%) translateX(100%);
	}
	100% {
		transform: translateY(-70%) translateX(100%);
	}
}
.badge__content--primary {
	background-color: #409eff;
}
.badge__content--success {
	background-color: #67c23a;
}
.badge__content--warning {
	background-color: #e6a23c;
}
.badge__content--info {
	background-color: #909399;
}
.badge__content--danger {
	background-color: #f56c6c;
}
.badge__content--lineargradient {
	background-image: linear-gradient(#e55, #b00);
}
</style>
